<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>table</title>
	<link href="assets/css/table.css" rel="stylesheet" type="text/css">
	<link href="assets/css/iconfont.css" rel="stylesheet" type="text/css">
</head>
<body>

<table border="1">
	<thead>
		<tr class="header">
			<th colspan="5">采纳清单</th>
		</tr>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>2</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>3</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>4</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>5</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>6</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
		<tr>
			<td>7</td>
			<td>笔记本</td>
			<td>2.5元/本</td>
			<td>2</td>
			<td><button class="delIem">删除</button><button class="addItem">添加</button></td>
		</tr>
			<tr>
				<td colspan="5"><p style="float: right;" >总计</p></td>
			</tr>
	</tbody>
</table>

<div class="shade" style="display: none;">
	<div class="form-wrap">
		<h5 class="form-header">添加商品</h5>
		<div class="addform">
			<input name="goods" type="text" value="" placeholder="请输入商品名称">	<br>
			<input name="price" type="text" value="" placeholder="请输入商品单价"><br>
			<input name="num" type="text" value="" placeholder="请输入商品数量"><br>
			<div class="addoptio">
				<button id="addBtn">确定</button>
				<button id="missBtn">删除</button>
			</div>
		</div>

		<!-- <div class="cha">
			<em></em>
		</div> -->

		<div class="cha ">
			<span class="iconfont icon-guanbi" style="color: #fff;"></span>
		</div>

	</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

	$('tbody tr:odd').addClass('odd');

	$('.addItem').click(function(){
		$('.shade').show();
	});

	$('#missBtn').click(function(){
		$('.shade').hide();
	})

	$('.cha').click(function(){
		$('.shade').hide();
	})	

	var showform=function(){
		$('.shade').show();
	}

    // 删除行
	$("body").on('click','.delIem',function(){
		// 删除行
		$(this).parent().parent().remove();
		// 调整一下奇偶的样式
		$('tbody tr').removeClass();  // 先清除样式
		$('tbody tr:odd').addClass('odd');   //再重新添加样式
		//调整每行的序号
		for(var i=0;i<$('tbody tr').length-1;i++){
			$('tbody tr:eq('+i+')').find('td:first').text(i+1);
		}
	});



	$('#addBtn').click(function(){
		var goodsname=$('input[name=goods]').val();
		var price=$('input[name=price]').val();
		var num=$('input[name=num]').val();

		// 清空输入框
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');


		var ntr=$('tbody tr').length;
		var sn=$('tbody tr:eq('+(ntr-2)+')').find('td:first').text();

		// 把表单的值追加到表格的指定位置
		var tr='<tr><td>'+(sn*1+1)+'</td><td>'+goodsname+'</td><td>'+price+'<span>元/本</span>'+'</u><td>'+num+'</td><td>'+'<button class="delIem">删除</button>'+'<button onclick="showform()">添加</button></td></tr>';

		// 往表格中插入一行
		$('tbody tr:eq('+(ntr-2)+')').after(tr);

		// $("#addItem").click(function(){
		// 	$("tr").append("goodsname +'--'+price +'---'+num");
		// });

		// 隐藏表单的输入层
		$('.shade').hide();

		console.log(goodsname +'--'+price+'---'+num);
	})




</script>

</body>
</html>